import React from 'react';
import { DATA_ENTRY, FormGroup, IconC, ModalC, codeType, FirstHeaderC, SecondHeaderC } from '../../comps';
import { Tooltip } from 'antd';
import { PrimaryC, PrimaryGhostC } from '../../comps';
import moment from 'moment';

//rowNumber  传入几则一行几列的展示
class FormGroupOneTwoC extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {}

  componentWillUnmount() {
    // 删除窗口大小的监听
    window.removeEventListener('resize', this.windowChange);
  }

  // 窗口大小变更触发
  windowChange = () => {
    const screenWidth = document.documentElement.clientWidth;
    if (screenWidth < 1920) {
      if (this.state.fieldInRow !== 3) {
        this.setState({
          span: '16',
        });
      }
    } else {
      if (this.state.fieldInRow !== 4) {
        this.setState({
          span: '12',
        });
      }
    }
  };
  handleRight = () => {
    return (
      <>
        <div className='flotRight'>
          <div>
            <Tooltip placement='top' title={'新增测试'} overlayStyle={{ background: '#fff' }}>
              <div className='btnPlus' style={{ cursor: 'pointer' }}>
                <IconC type='newly'></IconC>
              </div>
            </Tooltip>
          </div>
        </div>
      </>
    );
  };
  render() {
    return (
      <div style={{ padding: '20px' }}>
        {/* 基于分辨率的基本上再通过父元素的宽度自动适配 */}
        <FirstHeaderC title='基于父元素自动布局一行一个' topHeight={true} />
        <div style={{ display: 'flex' }}>
          <div style={{ width: '50%' }}>
            <FormGroup
              dataSource={[
                {
                  dataIndex: 'id24',
                  title: '目标内容',
                  type: DATA_ENTRY.BUSINESSTARGETC,
                  onRef: (ref) => (this.refs = ref),
                  rightContentShow: true,
                  dataIndex: 'target',
                  disabled: false,
                  info: {},
                  TaretType: 2,
                  rules: [{ required: true, message: '请输入' }],
                },
                { dataIndex: 'id1', title: '一', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id1', title: '一二', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id1', title: '一二三', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id1', title: '一二三四', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id1', title: '一二三四五', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id1', title: '一二三四五六', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id1', title: '一二三四五六七', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id1', title: '一二三四五六七八', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id2', title: '一二三四五六七八九', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id3', title: '一二三四五六七八九十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id4', title: '一二三四五六七八九十十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id5', title: '一二三四五六七八九十十一', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id6', title: '一二三四五六七八九十十一十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id7', title: '一二三四五六七八九十十一十二', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id8', title: '一二三四五六七八九十十一十二十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id9', title: '一二三四五六七八九十十一十二十三', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id10', title: '一二三四五六七八九十十一十二十三十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id11', title: '一二三四五六七八九十十一十二十三十四', type: DATA_ENTRY.INPUT, lineOne: true, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id11', helper: '111', title: '一二三四五六七', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id22', helper: '111', title: '一二三四五六七八', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id33', helper: '111', title: '一二三四五六七八九', type: DATA_ENTRY.INPUT },
                { dataIndex: 'id44', helper: '111', title: '一二三四五六七八九十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id55', helper: '111', title: '一二三四五六七八九十十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id66', helper: '111', title: '一二三四五六七八九十十一', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id77', helper: '111', title: '一二三四五六七八九十十一十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id88', helper: '111', title: '一二三四五六七八九十十一十二', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id99', helper: '111', title: '一二三四五六七八九十十一十二十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id100', helper: '111', title: '一二三四五六七八九十十一十二十三', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                // { dataIndex: 'id11', helper: '111', title: '一二三四五六七八九十十一十二十三十', type: DATA_ENTRY.INPUT, span: '24',styleRow:{width:'30%'},rules: [{required: true,message: '请输入'}] }
              ]}
              autoLayout={false}
              rowNumber={1}
            />
          </div>
          <div style={{ width: '50%', border: '1px solid blue' }}>其他div占据的位置</div>
        </div>
        <FirstHeaderC title='基于父元素自动布局一行两个' topHeight={true} />
        <div style={{ display: 'flex' }}>
          <div style={{ width: '50%' }}>
            <FormGroup
              dataSource={[
                { dataIndex: 'id1', title: '一二三四五六七八', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id2', title: '一二三四五六七八九', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                {
                  dataIndex: 'id244',
                  title: '目标内容',
                  type: DATA_ENTRY.BUSINESSTARGETC,
                  onRef: (ref) => (this.refs = ref),
                  rightContentShow: true,
                  dataIndex: 'target',
                  disabled: false,
                  TaretType: 2,
                  rules: [{ required: true, message: '请输入' }],
                },
                { dataIndex: 'id3', title: '一二三四五六七八九十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id4', title: '一二三四五六七八九十十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id5', title: '一二三四五六七八九十十一', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id6', title: '一二三四五六七八九十十一十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id7', title: '一二三四五六七八九十十一十二', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id8', title: '一二三四五六七八九十十一十二十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id9', title: '一二三四五六七八九十十一十二十三', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id10', title: '一二三四五六七八九十十一十二十三十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                // { dataIndex: 'id11', title: '一二三四五六七八九十十一十二十三十四', type: DATA_ENTRY.INPUT, lineOne: true,rules: [{required: true,message: '请输入'}] },
                { dataIndex: 'id11', helper: '111', title: '一二三四五六七', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id22', helper: '111', title: '一二三四五六七八', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id33', helper: '111', title: '一二三四五六七八九', type: DATA_ENTRY.INPUT },
                { dataIndex: 'id44', helper: '111', title: '一二三四五六七八九十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id55', helper: '111', title: '一二三四五六七八九十十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id66', helper: '111', title: '一二三四五六七八九十十一', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id77', helper: '111', title: '一二三四五六七八九十十一十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id88', helper: '111', title: '一二三四五六七八九十十一十二', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id99', helper: '111', title: '一二三四五六七八九十十一十二十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
                { dataIndex: 'id100', helper: '111', title: '一二三四五六七八九十十一十二十三', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }] },
              ]}
              autoLayout={false}
              rowNumber={2}
            />
          </div>
          <div style={{ width: '50%', border: '1px solid red' }}>其他div占据的位置</div>
        </div>
        <FirstHeaderC title='基于父元素自动布局一行几个' topHeight={true} />
        <div style={{ display: 'flex' }}>
          <div style={{ width: '70%', border: '1px solid red' }}>
            <FormGroup
              dataSource={[
                {
                  dataIndex: 'id24',
                  title: '目标内容',
                  type: DATA_ENTRY.SELECT,
                  rightContent: this.handleRight(),
                  rules: [{ required: true, message: '请输入' }],
                  span: 24,
                },
                { dataIndex: 'id1', title: '一二三四五六七八', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 8 },
                { dataIndex: 'id2', title: '一二三四五六七八九', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 12 },
                { dataIndex: 'id3', title: '一二三四五六七八九十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                { dataIndex: 'id5', title: '一二三四五六七八九十十一', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 12 },
                { dataIndex: 'id6', title: '一二三四五六七八九十十一十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 12 },

                { dataIndex: 'id24', title: '一二三四五六七八九', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 12 },
                { dataIndex: 'id24', title: '一二三四五六七八九', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 12 },
                { dataIndex: 'id4', title: '一二三四五六七八九十十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                { dataIndex: 'id24', title: '一二三四五六七八九', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                { dataIndex: 'id7', title: '一二三四五六七八九十十一十二', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 12 },
                { dataIndex: 'id8', title: '一二三四五六七八九十十一十二十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 12 },
                { dataIndex: 'id10', title: '一二三四五六七八九十十一十二十三十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                // { dataIndex: 'id11', title: '一二三四五六七八九十十一十二十三十四', type: DATA_ENTRY.INPUT, lineOne: true,rules: [{required: true,message: '请输入'}] },
                { dataIndex: 'id11', helper: '111', title: '一二三四五六七', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                { dataIndex: 'id22', helper: '111', title: '一二三四五六七八', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                { dataIndex: 'id9', title: '一二三四五六七八九十十一十二十三', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                { dataIndex: 'id33', helper: '111', title: '一二三四五六七八九', type: DATA_ENTRY.INPUT, span: 24 },
                { dataIndex: 'id44', helper: '111', title: '一二三四五六七八九十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                { dataIndex: 'id55', helper: '111', title: '一二三四五六七八九十十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                { dataIndex: 'id66', helper: '111', title: '一二三四五六七八九十十一', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                { dataIndex: 'id77', helper: '111', title: '一二三四五六七八九十十一十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                { dataIndex: 'id88', helper: '111', title: '一二三四五六七八九十十一十二', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                { dataIndex: 'id99', helper: '111', title: '一二三四五六七八九十十一十二十', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
                { dataIndex: 'id100', helper: '111', title: '一二三四五六七八九十十一十二十三', type: DATA_ENTRY.INPUT, rules: [{ required: true, message: '请输入' }], span: 24 },
              ]}
              autoLayout={false}
            />
          </div>
        </div>
      </div>
    );
  }
}
export default FormGroupOneTwoC;
